<template>
  <div class="dashboard">
    <topAndbottom>
      <template #title>阶段配置</template>
      <template #container>
        <div class="common-container">
          <div class="container-search">
            <el-form :model="tableDate.searchParams" label-width="80px" @submit.native.prevent="" :inline="true"
              size="default">
              <el-form-item label="阶段名">
                <el-input v-model="tableDate.searchParams.experienceName" @keyup.enter.native="" clearable
                  @clear="serachBtn" />
              </el-form-item>
              <el-form-item>
                <el-button :icon="Search" @click="serachBtn" type="primary">搜索</el-button>
                <el-button :icon="Close" @click="resetBtn" type="danger">重置</el-button>
                <!-- <el-button :icon="Plus" type="success" @click="addBtn">新增</el-button> -->
              </el-form-item>
            </el-form>
          </div>
          <div class="container-table">
            <el-table v-loading="tableDate.Loading" :height="tableDate.tableHeight" :data="tableDate.list" :row-class-name="tableRowClassName"
              style="width: 100%">
              <el-table-column prop="username" show-overflow-tooltip label="创建人" align="center" />
              <el-table-column prop="experienceName" show-overflow-tooltip label="经验名称" align="center" />
              <el-table-column prop="createTime" show-overflow-tooltip label="创建时间" align="center" />
              <el-table-column show-overflow-tooltip label="审核状态" align="center">
                <template #default="scope">
                  {{ scope.row.auditStatus === '0' ? '待审核' : scope.row.auditStatustStatus === '1' ? '审核成功' : '审核驳回' }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                  <!-- <el-button type="primary" :icon="Edit" @click="editBtn(scope.row)">编辑</el-button> -->
                    <el-popconfirm confirm-button-text="Yes" width="350" cancel-button-text="No" icon-color="#626AEF"
                      :title="scope.row.experienceName + ' 是否通过审核?'"  @confirm="confirmEvent(scope.row)"  @cancel="cancelEvent(scope.row)">
                      <template #reference>
                        <el-button type="primary" :icon="Check">审核</el-button>
                      </template>
                    </el-popconfirm>
                  <!-- <el-button type="success" :icon="View" @click="detailBtn(scope.row)">详情</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="container-footer">
            <el-pagination v-model:current-page="tableDate.search.page" v-model:page-size="tableDate.search.size"
              :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="tableDate.total"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </div>
      </template>

    </topAndbottom>
    <AddEdit ref="RefMyExperience" @save="save"></AddEdit>
  </div>
</template>

<script setup lang='ts'>
import AddEdit from './components/AddEdit.vue'
import { Search, Plus, Edit, Check,Close,View } from '@element-plus/icons'
import tableModel from './tsModel/TableModel'
import addEdit from './tsModel/AddEdit'
const { tableDate, getExperiencePage, serachBtn, resetBtn, handleSizeChange, handleCurrentChange,detailBtn,tableRowClassName } = tableModel()
const { addBtn, editBtn, deleteBtn, RefMyExperience, save,cancelEvent,confirmEvent } = addEdit(tableDate, getExperiencePage)

</script>
<style scoped lang='scss'>
.dashboard {
  height: 100%;

  :deep(.el-form-item__label) {
    color: #fff;
  }
}
</style>